<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <div>
          <img class="logo" src="@/assets/img/logo_big.png" alt="1">
        </div>
      </el-col>
      <el-col :span="11">
        <div>
          <el-menu :default-active="activeIndex" :router="true" mode="horizontal" @select="handleSelect">
            <el-menu-item index="/index" route="/index">首页</el-menu-item>
            <el-menu-item index="/product" route="/product">产品</el-menu-item>
            <el-menu-item index="/company" route="/company">公司</el-menu-item>
            <el-menu-item index="/cooperation" route="/cooperation">合作</el-menu-item>
          </el-menu>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeIndex: ''
    }
  },
  props: {
  },
  methods: {
    handleSelect (key, keyPath) {
      // console.log(key, keyPath)
    },
    initMeunActiveData () {
      let path = this.$route.path
      switch (true) {
        case path === '/':
          path = '/index'
          break
        case path.indexOf('/company') !== -1:
          path = '/company'
          break
      }
      this.activeIndex = path
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'initMeunActiveData'
  }
}
</script>

<style scoped>
.logo{
  height: 61px;
  width: 160px;
  padding-top: 5px;
}

.el-menu.el-menu--horizontal{
  border: none !important;
}

.el-menu--horizontal>.el-menu-item{
  height: 70px !important;
  line-height: 70px !important;
  font-size: 16px !important;
}
</style>
